.scaleBg {
    -webkit-animation: scale-bg 6s linear forwards;
    animation: scale-bg 6s linear forwards;
}

@keyframes scale-bg {
    from {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.slideLeft {
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0%);
        opacity: 1;
    }
}

.slideRight {
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
}

@keyframes slideRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateX(-150%);
        opacity: 0;
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
        animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
        transform: translateX(0%);
        opacity: 1;
    }
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateX(-150%);
        opacity: 0;
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
        animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
        transform: translateX(0%);
        opacity: 1;
    }
}

.driveInLeft {
    -webkit-animation-name: driveInLeft;
    animation-name: driveInLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

@keyframes driveInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-60px, 0, 0);
        transform: translate3d(-60px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.driveInRight {
    -webkit-animation-name: driveInRight;
    animation-name: driveInRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

@keyframes driveInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(60px, 0, 0);
        transform: translate3d(60px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.driveInTop {
    -webkit-animation-name: driveInTop;
    animation-name: driveInTop;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

@keyframes driveInTop {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -200px, 0);
        transform: translate3d(0, -200px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.driveInBottom {
    -webkit-animation-name: driveInBottom;
    animation-name: driveInBottom;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@keyframes driveInBottom {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 300px, 0);
        transform: translate3d(0, 300px, 0);
    }

    30% {
        opacity: 1;
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes clockwise {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes clockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes counter-clockwise {
    0% {
        -webkit-transform: rotate(360deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes counter-clockwise {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.kuan {
    -webkit-animation-name: kuan;
    animation-name: kuan;
    animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

@keyframes kuan {
    0% {
        right: 0;
        width: 0px;
    }

    100% {
        right: 0;
        width: 200px;
    }
}

.kuan1 {
    -webkit-animation-name: kuan1;
    animation-name: kuan1;
    animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

@keyframes kuan {
    100% {
        right: 0;
        width: 200px;
    }

    0% {
        right: 0;
        width: 0px;
    }
}

.xiaon {
    animation: xiaon 5s 1 forwards;
    -mzoanimation: xiaon 5s 1 forwards;
    -webkit-animation: xiaon 5s 1 forwards;
    -o-animation: xiaon 5s 1 forwards;
}

@keyframes xiaon {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        width: 100;
        opacity: 1;
    }
}

.zifadeInUp {
    -webkit-animation-name: zifadeInUp;
    animation-name: zifadeInUp;
}

@-webkit-keyframes zifadeInUp {
    0% {
        -webkit-transform: translateY(120px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

@-ms-keyframes zifadeInUp {
    0% {
        -ms-transform: translateY(80px);
        opacity: 0;
    }

    100% {
        -ms-transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes zifadeInUp {
    0% {
        transform: translateY(80px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.zifadeInDown {
    -webkit-animation-name: zifadeInDown;
    animation-name: zifadeInDown;
}

@-webkit-keyframes zifadeInDown {
    0% {
        -webkit-transform: translateY(-80px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

@-ms-keyframes zifadeInDown {
    0% {
        -ms-transform: translateY(-80px);
        opacity: 0;
    }

    100% {
        -ms-transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes zifadeInDown {
    0% {
        transform: translateY(-80px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.shake1 {
    animation: shake1 5s infinite;
    -mzoanimation: shake1 5s infinite;
    -webkit-animation: shake1 5s infinite;
    -o-animation: shake1 5s infinite;
}

@keyframes shake1 {

    0%,
    100% {
        -webkit-transform: translateY(5px);
        -ms-transform: translateY(5px);
        transform: translateY(5px);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translateY(5px);
        -ms-transform: translateY(5px);
        transform: translateY(5px);
    }
}

.spinIn {
    -webkit-animation-name: spinIn;
    animation-name: spinIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes spinIn {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transform: rotateZ(0deg) scale3d(0, 0, 0);
        transform: rotateZ(0deg) scale3d(0, 0, 0);
        -webkit-transform-origin: center center;
        transform-origin: center center;
    }

    50% {
        opacity: 1;
    }

    70% {
        -webkit-transform: rotateZ(380deg) scale3d(1, 1, 1);
        transform: rotateZ(380deg) scale3d(1, 1, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
    }

    100% {
        -webkit-transform: rotateZ(360deg) scale3d(1, 1, 1);
        transform: rotateZ(360deg) scale3d(1, 1, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
    }
}

.rotate {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    /* IE 9 */
    -moz-transform: rotate(360deg);
    /* Firefox */
    -webkit-transform: rotate(360deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(360deg);
    -webkit-transition-duration: 0.7s;
}

.fangun {
    animation: fangun 5s infinite;
    -mzoanimation: fangun 5s infinite;
    -webkit-animation: fangun 5s infinite;
    -o-animation: fangun 5s infinite;
}

@keyframes fangun {
    0% {
        transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        -webkit-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
    }
}

@-webkit-keyframes circleProgressLoad {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

.zifadeInRight {
    -webkit-animation-name: zifadeInRight;
    animation-name: zifadeInRight;
}

@-webkit-keyframes zifadeInRight {
    0% {
        -webkit-transform: translateX(100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-ms-keyframes zifadeInRight {
    0% {
        -ms-transform: translateX(100px);
        opacity: 0;
    }

    100% {
        -ms-transform: translatranslateXteY(0px);
        opacity: 1;
    }
}

@keyframes zifadeInRight {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

.zifadeInLeft {
    -webkit-animation-name: zifadeInLeft;
    animation-name: zifadeInLeft;
}

@-webkit-keyframes zifadeInLeft {
    0% {
        -webkit-transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-ms-keyframes zifadeInLeft {
    0% {
        -ms-transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        -ms-transform: translatranslateXteY(0px);
        opacity: 1;
    }
}

@keyframes zifadeInLeft {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

.popIn {
    -webkit-animation-name: popIn;
    animation-name: popIn;
}

@keyframes popIn {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    40% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(1.08, 1.08, 1.08);
        transform: scale3d(1.08, 1.08, 1.08);
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    80% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.fangun1 {
    animation: fangun1 10s linear infinite;
    -mzoanimation: fangun1 10s linear infinite;
    -webkit-animation: fangun1 10s linear infinite;
    -o-animation: fangun1 10s linear infinite;
}

@keyframes fangun1 {
    0% {
        left: 0;
        opacity: 1;
        transform: translateX(100px);
    }

    100% {
        left: 1920px;
        opacity: 1;
        transform: translateX(0);
    }
}

.fangun2 {
    animation: fangun2 10s linear infinite;
    -mzoanimation: fangun2 10s linear infinite;
    -webkit-animation: fangun2 10s linear infinite;
    -o-animation: fangun2 10s linear infinite;
}

@keyframes fangun2 {
    0% {
        right: 0;
        opacity: 1;
        transform: translateX(100px);
    }

    100% {
        right: 1920px;
        opacity: 1;
        transform: translateX(0);
    }
}

.openDownLeftRetourn {
    -webkit-animation-name: openDownLeftRetourn;
    animation-name: openDownLeftRetourn;
}

@keyframes openDownLeftRetourn {
    0% {
        transform-origin: bottom left;
        transform: rotate(-110deg);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform-origin: bottom left;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
}

.zifadeInUp {
    -webkit-animation-name: zifadeInUp;
    animation-name: zifadeInUp;
}

@-webkit-keyframes zifadeInUp {
    0% {
        -webkit-transform: translateY(80px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

@-ms-keyframes zifadeInUp {
    0% {
        -ms-transform: translateY(80px);
        opacity: 0;
    }

    100% {
        -ms-transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes zifadeInUp {
    0% {
        transform: translateY(80px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}



/*
==========
zoomerOut
==========
*/
.zoomerOut {
    animation-name: zoomerOut;
    -webkit-animation-name: zoomerOut;

    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0);
    -webkit-animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0);

    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    visibility: visible !important;
}

@-webkit-keyframes zoomerOut {
    0% {
        -webkit-transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(0.8);
    }
}

@keyframes zoomerOut {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(0.8);
    }
}

.swap {
    -webkit-animation-name: swap;
    animation-name: swap;
}

@-webkit-keyframes swap {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 100%;
        -webkit-transform: scale(0, 0) translate(-700px, 0px);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: scale(1, 1) translate(0px, 0px);
        ;
    }
}

@keyframes swap {
    0% {
        opacity: 0;
        transform-origin: 0 100%;
        transform: scale(0, 0) translate(-700px, 0px);
    }

    100% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(1, 1) translate(0px, 0px);
    }
}


.perspectiveLeftRetourn {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: perspectiveLeftRetourn;
    animation-name: perspectiveLeftRetourn;
}

@-webkit-keyframes perspectiveLeftRetourn {
    0% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: perspective(800px) rotateY(-130deg);
    }

    100% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: perspective(800px) rotateY(0deg);
    }
}

@keyframes perspectiveLeftRetourn {
    0% {
        transform-origin: 0 0;
        transform: perspective(800px) rotateY(-130deg);
    }

    100% {
        transform-origin: 0 0;
        transform: perspective(800px) rotateY(0deg);
    }
}


.spaceInUp {
    -webkit-animation-name: spaceInUp;
    animation-name: spaceInUp;
}

@-webkit-keyframes spaceInUp {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: scale(.2) translate(0%, -200%);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: scale(1) translate(0%, 0%);
    }
}

@keyframes spaceInUp {
    0% {
        opacity: 0;
        transform-origin: 50% 0%;
        transform: scale(.2) translate(0%, -200%);
    }

    100% {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: scale(1) translate(0%, 0%);
    }
}

/*.paizi img{animation: whirl 50s linear infinite;}*/
@keyframes whirl {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}




.boegn1 {
    -webkit-animation-duration: 0.6s;
    -webkit-animation-name: boegn1;
    animation-duration: 0.6s;
    animation-name: boegn1;
}

@keyframes boegn1 {
    0% {
        transform: translateX(-60%);
    }

    60% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(0%);
    }
}



.boegn {
    -webkit-animation-duration: 1s;
    -webkit-animation-name: boegn;
    animation-duration: 1s;
    animation-name: boegn;
    animation-fill-mode: forwards;
}

@keyframes boegn {
    0% {
        transform: translateX(-100%);
    }

    60% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(101%);
    }
}


.yceo {
    -webkit-animation-duration: 1.1s;
    -webkit-animation-name: yceo;
    animation-duration: 1.1s;
    animation-name: yceo;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes yceo {
    0% {
        opacity: 0
    }

    60% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}


.yrob {
    -webkit-animation-duration: 0.6s;
    -webkit-animation-name: yrob;
    animation-duration: 0.6s;
    animation-name: yrob;
}

@keyframes yrob {
    0% {
        transform: translateX(60%);
    }

    60% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(0%);
    }
}



.yrob1 {
    -webkit-animation-duration: 1s;
    -webkit-animation-name: yrob1;
    animation-duration: 1s;
    animation-name: yrob1;
    animation-fill-mode: forwards;
}

@keyframes yrob1 {
    0% {
        transform: translateX(0%);
    }

    60% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-101%);
    }
}


.fada {
    -webkit-animation-name: fada;
    animation-name: fada;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes fada {
    0% {
        opacity: 0.6;
        transform: scale3d(1, 1, 1);
    }

    50% {
        opacity: 1;
        transform: scale3d(1.02, 1.02, 1.02);
    }

    100% {
        opacity: 0.6;
        transform: scale3d(1, 1, 1);
    }
}


.xyeo {
    -webkit-animation-name: xyeo;
    animation-name: xyeo;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes xyeo {
    0% {
        opacity: 0.6;
    }


    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}




/*
 @-moz-keyframes bg {
0% {
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-moz-transform: translate3d(-2250px, 0, 0);
-webkit-transform: translate3d(-2250px, 0, 0);
-o-transform: translate3d(-2250px, 0, 0);
-ms-transform: translate3d(-2250px, 0, 0);
transform: translate3d(-2250px, 0, 0);
}
}
 @-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-moz-transform: translate3d(-2250px, 0, 0);
-webkit-transform: translate3d(-2250px, 0, 0);
-o-transform: translate3d(-2250px, 0, 0);
-ms-transform: translate3d(-2250px, 0, 0);
transform: translate3d(-2250px, 0, 0);
}
}
 @-o-keyframes bg {
0% {
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-moz-transform: translate3d(-2250px, 0, 0);
-webkit-transform: translate3d(-2250px, 0, 0);
-o-transform: translate3d(-2250px, 0, 0);
-ms-transform: translate3d(-2250px, 0, 0);
transform: translate3d(-2250px, 0, 0);
}
}
 @-ms-keyframes bg {
0% {
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-moz-transform: translate3d(-2250px, 0, 0);
-webkit-transform: translate3d(-2250px, 0, 0);
-o-transform: translate3d(-2250px, 0, 0);
-ms-transform: translate3d(-2250px, 0, 0);
transform: translate3d(-2250px, 0, 0);
}
}
*/
@keyframes bg {
    0% {
        -moz-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

    }

    100% {
        -moz-transform: translate3d(1250px, 0, 0);
        -webkit-transform: translate3d(1250px, 0, 0);
        -o-transform: translate3d(1250px, 0, 0);
        -ms-transform: translate3d(1250px, 0, 0);
        transform: translate3d(1250px, 0, 0);

    }

}



@keyframes bgc {
    0% {
        -moz-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -moz-transform: translate3d(2250px, 0, 0);
        -webkit-transform: translate3d(2250px, 0, 0);
        -o-transform: translate3d(2250px, 0, 0);
        -ms-transform: translate3d(2250px, 0, 0);
        transform: translate3d(2250px, 0, 0);
    }
}

@keyframes whirlddd {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@-webkit-keyframes comet {

    0%,
    40% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    60%,
    100% {
        -webkit-transform: translateX(-100vmax);
        transform: translateX(-100vmax);
        opacity: 0;
    }
}

@keyframes comet {

    0%,
    40% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    60%,
    100% {
        -webkit-transform: translateX(-100vmax);
        transform: translateX(-100vmax);
        opacity: 0;
    }
}


@-webkit-keyframes twinkle {
    25% {
        opacity: 0;
    }
}

@keyframes twinkle {
    25% {
        opacity: 0;
    }
}






@keyframes animStar {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-2000px);
    }
}



.blink {
    -webkit-animation-name: blink;
    animation-name: blink;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes circleRoate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes circleRoate1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}




.subof {
    animation-name: subof;
    -webkit-animation-name: subof;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
}

@keyframes subof {
    0% {
        opacity: 0;
        transform: translateY(120px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}